<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
    <div class="timeSharingCurve">
        <nu-col :span="24" style="height:calc(130px - 20px);">
            <nutbTitle title="分时曲线"></nutbTitle>
            <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
                :buttons="fyButtons">
                <NuformItem label="厂站选择" prop="type" :rules="[{ required: false, message: '厂站选择不能为空' }]" width="320px">
                    <nu-input type="text" v-model="formData.name" size="middle" placeholder="请选择厂站名称"></nu-input>
                </NuformItem>
                <NuformItem label="测点选择" prop="name" width="320px">
                    <nu-select class="searchSelect" :filterable="true" :list="typeList" type="text" v-model="formData.type"
                        autocomplete="off" @change="typeChange" style="width: 100%;" placeholder="请选择测点">
                    </nu-select>
                </NuformItem>

                <NuformItem label="日期" prop="type" width="320px">
                    <el-date-picker v-model="formData.time" type="date" placeholder="请选择日期" style="width: 100%;"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </NuformItem>
                <div class="btnBox">
                    <nu-button type="primary" class="searchButton" @click="searchLine">查询</nu-button>
                    <nu-button type="primary" class="searchButton" @click="callBtn">召唤</nu-button>
                </div>
            </NuVerifyForm>
        </nu-col>
        <nu-col :span="24" style="width:100%;height: calc(100% - 130px - 20px);">
            <div class="treeTable">
                <el-tree :data="treeData" :props="defaultProps" default-expand-all></el-tree>
                <div class="right">
                    <nu-echarts width="auto" height="50vh" :option="lineOption" class="echarts"
                        style="margin:auto;margin-top:2rem;margin-left:30px;margin-right:30px;padding: 20px 0 0 0;"
                        v-if="isEchart"></nu-echarts>
                    <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
                        style="margin:0 0 20px 0">
                    </NuTableList>
                </div>
            </div>
        </nu-col>
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import nuEcharts from "@/components/base/echarts"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import * as echarts from 'echarts';
export default {
    name: "timeSharingCurve",
    components: { nuCol, nutbTitle, nuEcharts, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, },
    data() {
        return {
            formData: {
                name: '',
                type: '',
            },
            fyButtons: [],
            isEchart: true,
            lineOption: {
                color: ['#40b0e2', '#69e5c1', '#626b90', '#a0a7e5'],
                title: {
                    text: '测点1分时曲线',
                    left: '0',
                    textStyle: {
                        fontWeight: "normal"
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                xAxis: {
                    type: 'category',
                    data: [],
                },
                yAxis: {
                    type: 'value',
                    name: '%',
                },
                grid: {
                    left: '3%',
                    right: '3%',
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(64, 176, 226,0.8)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(64, 176, 226,0.1)',
                                },
                            ]),
                        },
                    },
                ],
            },
            dataSource: [],
            columns: [],
            typeList: [{ label: '测点1', value: 1 }, { label: '测点2', value: 2 }, { label: '测点3', value: 3 }, { label: '测点4', value: 4 }],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                isNoSetHeight: true,
                height: '120px',
            },
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    created() {
    },
    mounted() {
        this.getTimeSharingLineData()
        this.getTreeData()
    },
    methods: {
        /**
         * 查询
         */
        searchLine() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getTimeSharingLineData();
            }
        },
        /**
         * 类型change事件
         */
        typeChange() {

        },
        /**
         * 召唤
         */
        callBtn() {

        },
        /**
         * 获取曲线数据
         */
        getTimeSharingLineData() {
            let postData = {
                ...this.formData,
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.columns = [{
                label: '',
                prop: 'name',
                width: '100px',
                // render: (h, params) => {
                //     return h('span', params.index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize);
                // },
            }]
            let obj = {}, xAxis = [], series = [];
            this.$httpGet(window.api.getTimeSharingLineData, postData).then(res => {
                if (res.success && res.data) {
                    this.isEchart = false
                    res.data.dataGridResult.forEach((item, i) => {
                        this.columns.push({
                            label: item.dataTime,
                            prop: item.dataTime,
                        })
                        obj[item.dataTime] = item.plan
                        xAxis.push(item.dataTime)
                        series.push(item.plan)
                    })
                    obj['name'] = res.data.name
                    this.lineOption.title.text = res.data.name + '分时曲线'
                    this.lineOption.xAxis.data = xAxis
                    this.lineOption.series[0].data = series
                    this.dataSource = [obj]
                    this.$nextTick(() => {
                        this.isEchart = true
                    })
                } else {
                    this.dataSource = []
                }
            }).catch(err => {
                this.dataSource = []
            });
        },
        //获取树形控件
        getTreeData() {
            this.$httpPost(window.api.getTreeData).then(res => {
                if (res.success) {
                    this.treeData = res.data
                } else {
                }
            }).catch(err => {

            });
        },
    }
};
</script>
    
<style scoped lang="scss">
.timeSharingCurve {
    height: calc(100vh - 70px);
}

.searchForm {
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    position: relative;
}

.treeTable {
    display: flex;
}

.el-tree {
    width: 15%;
}

.right {
    width: 85%;
}

.btnBox {
    display: flex;
    float: right;
    z-index: 10;
    position: absolute;
    top: 15px;
    right: 10px;
}
</style>
    
    